<template>
  <view class="my-honor-box">
    <!-- <view class="uni-data-checklist-honor">
      <uni-data-checklist
        :wrap="true"
        @change="changeChecklist"
        value="个人荣誉"
        :localdata="localdata"
        style="padding: 20rpx 0"
      ></uni-data-checklist>
    </view>
    <view
      class="honor-image"
      v-for="(item, index) in imageArr"
      :key="index + `honor`"
    >
      <img :src="item.imageUrl" alt="" style="width: 80%" />
      <view class="honor-text">{{ item.honorText }}</view>
    </view> -->
    <!-- <none-data v-if="imageArr.length===0 && isLoading"/> -->
    <!-- <view class="comment-bbox">
      <goComment
        @click="$unity3dGlobal"
        title="切换到三维空间展示区"
      ></goComment>
    </view> -->
    <view class="honor-top">
      <view class="honor-type" @tap="honorShow = true">
        <view class="text"> 荣誉类型: {{ honorName.name }} </view>
        <view class="icon">
          <u-icon name="arrow-down-fill" />
        </view>
      </view>
      <view class="honor-type" @tap="stateShow = true">
        <view class="text"> 审核状态: {{ stateName.name }} </view>
        <view class="icon">
          <u-icon name="arrow-down-fill" />
        </view>
      </view>
    </view>
    <none-data v-if="imageArr.length == 0" />
    <view class="ticket-box">
      <view class="ticket-card" v-for="item in imageArr" :key="item.id">
        <text class="name">
          {{ item.honorName }}
        </text>
      </view>
    </view>
    <up-picker
      :show="honorShow"
      :columns="honorData"
      title="荣誉类型"
      :closeOnClickOverlay="true"
      :defaultIndex="honorDefaultIndex"
      :itemHeight="px2Rpx(21)"
      keyName="name"
      @confirm="handlerHonorConfirm"
      @cancel="handlerHonorClosed"
      @close="handlerHonorClosed"
    />
    <up-picker
      :show="stateShow"
      :columns="stateData"
      title="处理状态"
      :closeOnClickOverlay="true"
      :defaultIndex="stateDefaultIndex"
      keyName="name"
      :itemHeight="px2Rpx(21)"
      @confirm="handlerStateConfirm"
      @cancel="handlerStateClosed"
      @close="handlerStateClosed"
    />
  </view>
</template>

<script setup>
import goComment from "./componments/go-comment.vue";
import {px2Rpx,} from "@/utils/utils";
import { ref, getCurrentInstance } from "vue";
import uniDataChecklist from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
import {
  getEnterpriseHonorByEnterprise,
  getPersonalHonorList,
  getUserInfoApi,
} from "@/api/user/index.js";
import { getHonorCheckLogsApi } from "@/package_user/pages/api/library.js";
import { onReachBottom, onShow } from "@dcloudio/uni-app";

const { proxy } = getCurrentInstance();
const honorDefaultIndex = ref([0]);
const stateDefaultIndex = ref([0]);
const current = ref(1);
const honorShow = ref(false);
const stateShow = ref(false);
const honorName = ref({
  name: "个人荣誉",
  index: 2,
});
const stateName = ref({
  name: "已完成",
  index: 1,
});
const honorData = ref([
  [
    {
      name: "个人荣誉",
      index: 2,
    },
  ],
]);
const stateData = ref([
  [
    {
      name: "已完成",
      index: 1,
    },
    {
      name: "审核中",
      index: 0,
    },
    {
      name: "未通过",
      index: 2,
    },
  ],
]);
const imageArr = ref([]);
const isLoading = ref(false);
function getNewComment() {}
function changeChecklist(event) {
  console.log(event.detail.value);
  imageArr.value = [];
  isLoading.value = false;
  switch (event.detail.value) {
    case "企业荣誉":
      var enterpriceId = uni.getStorageSync("enterpriseId");
      if (!enterpriceId) {
        proxy.modal.msg("您未加入企业");
        return;
      }
      getEnterpriseHonorByEnterprise(enterpriceId).then((res) => {
        console.log(res, "......");
        isLoading.value = true;
        res.data.map((o) => {
          imageArr.value.push({
            honorText: o.enterpriseHonor,
            imageUrl: o.resourceUrlList.map((item) => {
              return item;
            }),
          });
        });
      });
      break;
    case "个人荣誉":
      getPersonalHonorList().then((res) => {
        console.log(res, "......");
        isLoading.value = true;
        res.data.map((o) => {
          imageArr.value.push({
            honorText: o.userHonor,
            imageUrl: o.resourceUrlList.map((item) => {
              return item;
            }),
          });
        });
      });
      break;
    default:
      break;
  }
}
const handlerHonorConfirm = (data) => {
  console.log(data);
  honorDefaultIndex.value = data.indexs;
  honorName.value = data.value[0];
  current.value = 1;
  honorShow.value = false;
  getHonorCheckLogs();
};
const handlerHonorClosed = () => {
  honorShow.value = false;
};
const handlerStateConfirm = (data) => {
  console.log(data);
  stateDefaultIndex.value = data.indexs;
  stateName.value = data.value[0];
  current.value = 1;
  stateShow.value = false;
  getHonorCheckLogs();
};
const handlerStateClosed = () => {
  stateShow.value = false;
};
const getUserInfo = async () => {
  const res = await getUserInfoApi();
  const { code, data } = res;
  if (code == 200) {
    if (data.enterpriseId !== null && data.enterpriseManger !== 0) {
      honorData.value[0] = [
        {
          name: "个人荣誉",
          index: 2,
        },
        {
          name: "企业荣誉",
          index: 0,
        },
      ];
    }
    console.log("honorData",honorData.value);
  }
};
const getHonorCheckLogs = async () => {
  let aggregate = {
    page: current.value,
    size: 20,
    checkStatus: stateName.value.index,
    type: honorName.value.index,
  };
  const res = await getHonorCheckLogsApi(aggregate);
  const { code, data } = res;
  if (code == 200) {
    imageArr.value = data.records;
    console.log("imageArr.value", imageArr.value);
  }
};
const getHonorCheckLogsLoad = async () => {
  let aggregate = {
    page: current.value,
    size: 20,
    checkStatus: stateName.value.index,
    type: honorName.value.index,
  };
  const res = await getHonorCheckLogsApi(aggregate);
  const { code, data } = res;
  if (code == 200) {
    imageArr.value = imageArr.value.concat(data.records);
    console.log("imageArr.value", imageArr.value);
  }
};
onReachBottom(() => {
  current.value++;
  getHonorCheckLogsLoad();
});
onShow(() => {
  getUserInfo();
  getHonorCheckLogs();
});
</script>

<style scoped lang="less">
.my-honor-box {
  .uni-data-checklist-honor {
    padding: 0 150rpx;
    background-color: #f7f8fd;
    width: 60vw;
    // margin: 0 auto;
    position: sticky;
    top: 0;
  }
  .honor-image {
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: column;

    .honor-text {
      margin-top: 10rpx;
      font-size: 24rpx;
      font-family: "ali";
      margin-bottom: 40rpx;
    }
  }
  .comment-bbox {
    width: 100vw;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    .go-comment {
      background-image: linear-gradient(to right, #ff934c, #fc686f);
      width: 90vw;
      height: 70rpx;
      border-radius: 20rpx;
      text-align: center;
      line-height: 70rpx;
      color: #ffffff;
      font-size: "ali-m";
      font-size: 32rpx;
    }
  }
  .honor-top {
    position: sticky;
    top: 0;
    height: auto;
    background-color: #ffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    .honor-type {
      display: flex;
      padding: 30rpx;
      .text {
        font-size: 28rpx;
      }
    }
  }
  .ticket-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 10rpx;
    .ticket-card {
      width: 45%;
      padding: 10rpx;
      height: 60rpx;
      border: 1rpx solid #00b588;
      border-radius: 3rpx;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      margin-bottom: 20rpx;
      .name {
        color: #00b588;
        font-size: 24rpx;
        text-align: center;
      }
    }
  }
  // :deep(.u-picker) {
  //   height: 500rpx;
  //   .u-picker__view,
  //   .u-picker__view__column {
  //     height: 350rpx;
  //   }
  // }
}
</style>
